<template>
  <div v-if="detailInfo.banners">
    <Navbar
      :title="brand"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    ></Navbar>

    <div class="swipe-wrap">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#f66">
        <van-swipe-item v-for="item in banners">
          <img :src="item" alt="" />
        </van-swipe-item>
      </van-swipe>
      <div class="btn" @click="show = true">
        <van-icon name="play-circle-o" color="#F66" />
      </div>
    </div>

    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" dot />
      <van-action-bar-icon
        icon="cart-o"
        text="购物车"
        :badge="cartNum"
        @click="goCart"
      />
      <van-action-bar-button
        type="warning"
        text="加入购物车"
        @click="addCart"
      />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>

    <van-image-preview v-model:show="show" :images="videos">
      <template #image="{ src }">
        <video style="width: 100%" controls autoplay>
          <source :src="src" />
        </video>
      </template>
    </van-image-preview>
  </div>
  <div v-else>
    <!-- <van-skeleton title :row="3" /> -->
    加载中...
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { detailApi, cartApi, addCartApi } from "@/api/detail";
import Navbar from "@/components/Navbar.vue";
import { showToast } from "vant";

interface InfoType {
  banners?: string[];
  proid?: string;
}

const route = useRoute();
const router = useRouter();
const brand = ref<string>("");
const detailInfo = ref<InfoType>({});
const cartNum = ref<number>(0);
onMounted(async () => {
  const res: any = await detailApi(route.params.id + "");
  console.log(res);
  brand.value = res.data.brand;
  detailInfo.value = res.data;
});
const getCartList = async () => {
  const res: any = await cartApi({
    userid: localStorage.getItem("userid") || "",
  });
  console.log(res);
  cartNum.value = res.data.length;
};
onMounted(() => {
  getCartList();
});
// 可以通过计算属性将轮播图的数据单独拿出来
// 同时做一个容错处理
const banners = computed(() => {
  return detailInfo.value.banners ? detailInfo.value.banners[0].split(",") : [];
});
const onClickLeft = () => {
  router.go(-1);
};

const show = ref(false);
const videos = ["https://www.w3school.com.cn/i/movie.ogg"];

const goCart = () => {
  router.push("/cart");
};

// 加入购物车
const addCart = async () => {
  const res: any = await addCartApi({
    num: 1,
    proid: detailInfo.value.proid,
    userid: localStorage.getItem("userid"),
  });
  if (res) {
    showToast(res.message);
    getCartList();
  }
};
</script>

<style scoped lang="less">
.my-swipe .van-swipe-item {
  height: 350px;

  img {
    width: 100%;
    height: 100%;
  }
}

.swipe-wrap {
  position: relative;

  .btn {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: #fff;
    .center();
  }
}
</style>
